<!DOCTYPE html>
<html>
	<head lang="zh">
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
		<title>Luckysheet</title>
		<link rel="stylesheet" href="./plugins/css/pluginsCss.css" />
		<link rel="stylesheet" href="./plugins/plugins.css" />
		<link rel="stylesheet" href="./css/luckysheet.css" />
		<link rel="stylesheet" href="./assets/iconfont/iconfont.css" />
		<script src="./plugins/js/plugin.js"></script>

		<!-- rollup luckysheet.js -->
		<script src="./luckysheet.umd.js"></script>
		<script src="./demoData/sheetVchart.js"></script>
		<script src="./demoData/sheetChart.js"></script>
		<script src="./demoData/sheetCell.js"></script>
		<script src="./demoData/sheetPicture.js"></script>
	</head>

	<body>
		<div id="luckysheet" style="margin: 0px; padding: 0px; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px"></div>

		<script>
			$(function () {
				// 从 sessionstorage 中获取数据
				const userid = window.sessionStorage.getItem("userid");
				console.log(" ==> userid", userid);
				const id = userid || Math.random().toString(16).slice(2, 8);
				const username = `user_${id}`;
				const gridkey = "29c0098f1e754e06f4cac2fbfd2b662a";

				const options = {
					container: "luckysheet",
					lang: "zh",
					// showinfobar: false,
					plugins: ["fileImport", "vchart", "chart"],
					data: [sheetCell],
					// 自定义请求头
					// requestHeaders: {
					// 	"Custom-userid": "123",
					// },
					cellRightClickConfig: {
						customs: [
							{
								title: "test",
								onClick: function (clickEvent, event, params) {
									console.log("function test click", clickEvent, event, params);
								},
							},
						],
					},

					allowUpdate: true, // 配置协同功能
					loadUrl: `http://localhost:9000/loadSheetData?gridkey=${gridkey}`,
					updateUrl: `http://localhost:9000?type=luckysheet&userid=${id}&username=${username}&gridkey=${gridkey}`, // 协同服务转发服务

					menuHandler: {
						// 隐藏内置菜单
						// hideDefaultMenu: ['exportFile', 'importFile'],

						// 自定义
						customs: [
							// 分割线

							{
								order: 0,
								label: "自定义菜单",
								value: "newFile",
								callback: () => {
									console.log("==> 自定义菜单");
								},
							},
							{
								order: 0,
								value: "divider",
							},
						],
					},
				};
				options.loading = {
					image: () => {
						return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`;
					},
					imageClass: "loadingAnimation",
				};
				luckysheet.create(options);
			});
		</script>
	</body>
</html>
